<template>
  <div class="flex flex-col gap-2">
    <div class="card flex flex-row items-center gap-2">
      <span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="YYYY-MM-DD"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 300px"
        />
      </span>
      <el-input v-model="queryData.inputText" placeholder="输入订单号" style="width: 200px" />
      <el-button type="primary" @click="query">查询</el-button>
    </div>

    <div class="card flex flex-col gap-2">
      <el-table :data="data.data" :height="tableHeight" border stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="订单号" width="300" prop="orderId" />
        <el-table-column label="状态" width="100" prop="status">
          <template #default="{ row }">
            <InsurMPayOrderStatus :order-status="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="订单类型" width="100" prop="source">
          <template #default="{ row }">
            <MZZY :mzzy="row.source" />
          </template>
        </el-table-column>
        <el-table-column label="院内ID" width="180" prop="patientId" />
        <el-table-column label="患者姓名" width="180" prop="name" />
        <el-table-column label="金额" width="100" prop="money" />
        <el-table-column label="创建时间" width="180" prop="createDate" />
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="{ row }">
            <el-button size="small" @click="orderDetail(row.orderId)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="queryData.currentPage"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-drawer v-model="visible" title="详情" size="900" direction="ltr">
      <div class="flex flex-col gap-10">
        <el-descriptions title="订单详情" border label-width="88">
          <el-descriptions-item label="订单号">{{ orderRec?.orderId }} </el-descriptions-item>
          <el-descriptions-item label="状态">
            <InsurMPayOrderStatus :order-status="orderRec?.status + ''" />
          </el-descriptions-item>
          <el-descriptions-item label="来源">
            <MZZY :mzzy="orderRec?.source + ''" />
          </el-descriptions-item>
          <el-descriptions-item label="患者姓名">{{ orderRec?.name }} </el-descriptions-item>
          <el-descriptions-item label="院内ID"> {{ orderRec?.patientId }} </el-descriptions-item>
          <el-descriptions-item label="创建时间"> {{ orderRec?.createDate }} </el-descriptions-item>
        </el-descriptions>
        <el-steps :space="200" :active="orderStatusActive" finish-status="success">
          <el-step
            v-for="value in InsurMPayOrderStatusArray.filter(item => item.status !== '9')"
            :key="value.status"
            :title="value.content"
          />
        </el-steps>
        <el-table stripe border :data="orderRec?.items">
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column label="his开单号" prop="hisOrderId" width="220" />
          <el-table-column label="金额" prop="money" width="100" />
          <el-table-column label="就诊日期" prop="outpVisitDate" width="180" />
          <el-table-column label="就诊序号" prop="outpVisitNo" width="180" />
          <el-table-column label="开单序列" prop="outpSerialNo" width="180" />
          <el-table-column label="处方号" prop="outpPrescNo" width="180" />
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { dayjs, ElMessage } from 'element-plus'
import { ref } from 'vue'
import type { PaginationRes } from '@/api/common'
import {
  InsurMPayAPIs,
  InsurMPayOrderStatusArray,
  type GetInsurMPayOrderByPaginationReq,
  type InsurMPayOrderRec,
} from '@/api/interface/insurMPay'
import InsurMPayOrderStatus from '@/views/components/InsurMPayOrderStatus.vue'
import MZZY from '@/views/components/MZZY.vue'

const visible = ref(false)
const orderRecs = ref<InsurMPayOrderRec[]>([])
const orderRec = ref<InsurMPayOrderRec | undefined>(undefined)
const dateRange = ref([])
const queryData = ref<GetInsurMPayOrderByPaginationReq>({
  beginDate: '',
  endDate: '',
  inputText: '',
  currentPage: 1,
  pageSize: 10,
})

/**查询数据 */
const data = ref<PaginationRes<InsurMPayOrderRec>>({
  total: 0,
  data: [],
})

/** 表格高度 */
const tableHeight = computed(() => {
  return window.innerHeight - 310
})

/** 订单状态 */
const orderStatusActive = computed(() => {
  let orderStatus: number = orderRec.value?.status ?? 0
  return orderStatus
})

/**订单详情 */
async function orderDetail(orderId: string) {
  visible.value = true
  orderRec.value = await InsurMPayAPIs.getOrder(orderId)
}

/**查询数据 */
async function query() {
  if (dateRange.value.length <= 0) {
    ElMessage.warning('请选择日期范围')
    return
  }
  queryData.value.beginDate = dayjs(dateRange.value[0]).format('YYYY-MM-DD')
  queryData.value.endDate = dayjs(dateRange.value[1]).format('YYYY-MM-DD')

  data.value = await InsurMPayAPIs.getOrders(queryData.value)
}

/** 页大小改变 */
const handleSizeChange = (val: number) => {
  queryData.value.pageSize = val
}

/** 当前页号 */
const handleCurrentChange = (val: number) => {
  queryData.value.currentPage = val
}

/** 监控 */
watch([() => queryData.value.currentPage, () => queryData.value.pageSize, () => queryData.value.inputText], () => {
  query()
})
</script>

<style lang="scss"></style>
